<template>
  <div>
    <span>输入一个数字:</span>
    <input
      type="text"
      v-model.number="number"
      class="block mt-5 rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm leading-6"
    />
    <p class="font-bold text-6xl text-indigo-600">{{ tweened.number.toFixed(0) }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import gsap from 'gsap'
const number = ref(0)
const tweened = ref({
  number: 0
})
watch(number, (n) => {
  gsap.to(tweened.value, { duration: 0.5, number: Number(n) || 0 })
})
</script>

<style lang="scss" scoped></style>
